<template>
  <div class="reg">
    <van-field
      v-model="phone"
      placeholder="手机号"
      class="input mt"
      :error-message="phonemsg"
      @blur.native.capture="checkPhone"
    />
    <van-field
      v-model="password"
      type="password"
      placeholder="密码"
      class="input mt"
      :error-message="pwdmsg"
      @blur.native.capture="checkPwd"
    />
    <van-field
      v-model="repwd"
      type="password"
      placeholder="确认密码"
      class="input mt"
      :error-message="repwdmsg"
      @blur.native.capture="checkRepwd"
    />
    <van-checkbox
      v-model="checked"
      shape="square"
      checked-color="black"
      class="mt check"
      >我同意隐私条款和使用政策</van-checkbox
    >
    <van-button
      color="black"
      class="mt"
      size="large"
      :disabled="!checked"
      @click="regsiter"
      >注册</van-button
    >
    <van-divider class="line">文字</van-divider>
    <div class="icont">
      <span class="iconfont icon-qq"></span>
      <span class="iconfont icon-zhifubao"></span>
      <span class="iconfont icon-weibo"></span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: false,
      phone: "",
      phonemsg: "",
      password: "",
      pwdmsg: "",
      repwd: "",
      repwdmsg: "",
    };
  },
  methods: {
    checkPhone() {
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        this.phonemsg = "手机号格式不正确";
      } else {
        this.phonemsg = null;
      }
    },
    checkPwd() {
      if (!/^[a-zA-Z]\w{5,17}$/.test(this.password)) {
        this.pwdmsg = "密码格式不正确";
      } else {
        this.pwdmsg = "";
      }
    },
    checkRepwd() {
      if (
        !/^[a-zA-Z]\w{5,17}$/.test(this.password) &&
        this.password == this.repwd
      ) {
        this.repwdmsg = "密码格式不正确";
      } else if (
        /^[a-zA-Z]\w{5,17}$/.test(this.password) &&
        this.password != this.repwd
      ) {
        this.repwdmsg = "两次密码不一致";
      } else {
        this.repwdmsg = "";
      }
    },
    regsiter() {
      let userobj = {
        uphone: this.phone,
        upwd: this.password,
      };
      this.axios
        .post("/user/regsiter", this.qs.stringify(userobj))
        .then((res) => {
          // console.log(res)
          if (res.data.code == 200) {
            this.$dialog.alert({
                message: `${res.data.msg}`,
                className:'msg'
              });
          } else {
            this.$dialog.alert({
              message: `${res.data.msg}`,
            });
          }
        });
    },
  },
};
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.reg {
  margin-top: 20px;
  .mt {
    margin-top: 20px;
  }
  .input {
    border: 1px solid black;
  }
  .check {
    font-size: 14px;
  }
  .icont {
    font-size: 2.5em;
    text-align: center;
    span:nth-child(2) {
      margin: 0 60px;
    }
  }
}
</style>
